<template>
  <ul class="list">
    <li
      class="item"
      v-for="item in letters"
      :key="item"
      :ref="item"
      @click="handleLetterClick"
      @touchstart.prevent="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >{{item}}</li>
  </ul>
</template>

<script>
export default {
  props: {
    cities: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      touchStatus: false, //控制触摸的时机
      startY: 0, //初始化的固定位置 a元素到顶部的距离
      timer: null
    };
  },
  computed: {
    //接收到的是一个对象类型的数据 而不是一个数组 现在需要得到一个数组 通过for in 遍历对象方式 拿到 k值
    letters() {
      const letters = [];
      for (let i in this.cities) {
        letters.push(i);
      }
      return letters; //['A','B','C'...]
    }
  },
  updated() {
    //数据更新 dom重新渲染执行这个钩子
    // 页面刚加载的时候 alphabet什么东西都不会显示出来 传递的是一个空对象初始化的值   获取到数据后 值才有数据 传递数据进来才会重新创建数据 组件ajax获取到数据之后 city的值发送变化 alpa的字母才被渲染出来  传递数据变化的时候 apla字母组件 重新渲染  重新渲染之后 updated钩子执行 页面展示出了 字母表的内容这样就能获取到了

    this.startY = this.$refs["A"][0].offsetTop; //取a的dom元素 获取元素到顶部的距离 还是要取0 不然会得到数组  固定的值 不需要重复的计算  提高性能
  },
  methods: {
    handleLetterClick(e) {
      // console.log( e.target.innerText);//得到点击的字母 传递给父组件
      this.$emit("change", e.target.innerText);
    },
    //触摸滚动事件 左边也跟着滚动 用到touch事件
    // touchstart touchmove touchend 触摸到一个dom元素时触发 手指在dom元素上滑动时触发 手指从一个dom元素移开的时候触发
    handleTouchStart() {
      this.touchStatus = true;
    },
    handleTouchMove(e) {
      if (this.touchStatus) {
        //开始滑动后才来触发这个内容
        //做一个节流 手指滑动过的地方都会一直触发这个函数 这样很耗性能 先判断这个是否存在
        if (this.timer) {
          clearTimeout(this.timer); //重复操作就添加 最后一次才执行
        }
  //通过节流来实现  如果真正做这事的时候  让其延迟16s后在去执行 假设16毫秒之间又去触发了这个 手指的滚动 会把上一次的滚动清除掉重新实现  等不重复执行这次要做的事情的时候才不清除定时器 重新执行这次要做的事情 就是滚动字母组件 左边也实现滚动
        this.timer = setTimeout(() => {
          const touchY = e.touches[0].clientY - 79; //触摸滚动的距离- 顶部导航栏的高度 79 = 滚动元素到顶部的距离了  不减 最顶部的
          const index = Math.floor((touchY - this.startY) / 20); //触摸滚动的距离 - 元素到顶部的距离  / 每一个li的高度 就是字母的高度 就得到了 当前手指滑动的位置对应字母的下标是多少了
          //  字母是 A B C 的数组元素 把传递过去的子组件传递给父组件 标签
          if (index >= 0 && index < this.letters.length) {
            this.$emit("change", this.letters[index]); //传递 abc 滚动区域过去 实现 elment元素的滚动
          }
        }, 16);
      }
    },
    handleTouchEnd() {
      this.touchStatus = false;
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 3.16rem;
  right: 0;
  bottom: 0;
  width: 0.8rem;

  .item {
    line-height: 0.8rem;
    text-align: center;
    font-size: 0.6rem;
    color: $bgColor;
  }
}
</style>
